<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=
    , initial-scale=1.0">
    <title>Document</title>
    <style>
        body{
            min-width: 320px;
            max-width: 720px;
            margin: 0 auto;
            background-image: url(img/12.jpg);
            background-size: 100%;
            background-repeat: no-repeat;
            background-position: 0 21vh;
        }
        .btn {
            position: absolute;
            top: 44%;
            left: 30%;
            width: 40vw;
            height: 12vh;
            background-color: deeppink;
            text-align: center;
            font-size: 6vw;
            line-height: 12vh;
            z-index: 999;
        }
        .fon {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%,-50%);
            width: 20vw;
            height: 10vh;
            text-align: center;
            font-size: 4vw;
            line-height: 10vh;
            color: rgb(126, 2, 250);
        }
    </style>
</head>

<body>

    <div class="btn">托开我</div>
    <div class="fon">臭宝杨玉妍</div>
    <script>
        var btn = document.querySelector('.btn');

        btn.addEventListener('selectstart', function (e) {
            e.preventDefault();        /*  不能选中文字 */
        });


        /* 移动端和网页端不通用 */  /* 移动端思想  用手指移动的距离加上盒子原来的坐标 */

        var x = 0;         /* 全局变量声明 */
        var y = 0;
        var starx = 0;
        var stary = 0;
        btn.addEventListener('touchstart', function (e) {
            x = this.offsetLeft;    /* 开始的位置 */
            y = this.offsetTop;
            starx = e.targetTouches[0].pageX;   /* 手指开始触摸的位置 */
            stary = e.targetTouches[0].pageY;
        });

        btn.addEventListener('touchmove', move);            /* 注意 和网页端的不同这里事件源是btn不是Dom */
        function move(e) {
            var movex = e.targetTouches[0].pageX - starx;
            var movey = e.targetTouches[0].pageY - stary;
            btn.style.top = y + movey + 'px';
            btn.style.left = x + movex + 'px';
            e.preventDefault(); // 阻止屏幕滚动的默认行为
        }

    </script>
</body>

</html>